<!--
    描述：
        Dialog弹出框
    传参：
        title: dialog标题
        showFooter：是否显示footer，默认显示
    slot:
        插入要展示的内容
    方法：
        openDialog()：打开弹出框
    示例：
        <a-button type="primary" @click="showModal">Open Modal</a-button>
        <ct-dialog ref="ctDialogRef" title="tit123">
            <slot>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </slot>
        </ct-dialog>

        const ctDialogRef = ref()
        const showModal = () => {
            ctDialogRef.value.openDialog()
        }
-->
<template>
    <div>
        <a-modal v-model:open="open" :title="title" @ok="handleOk">
            <slot></slot>
            <template #footer>
                <a-button key="back" @click="handleCancel" v-if="showFooter">取消</a-button>
                <a-button key="submit" type="primary" @click="handleOk" v-if="showFooter">提交</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const open = ref<boolean>(false);

defineProps({
    title: {
        type: String,
        require: true
    },
    showFooter: {
        type: Boolean,
        default: true
    }
})

const openDialog = () => {
    open.value = true
}

const handleOk = () => {
    open.value = false
};

/**
 * 取消
 */
const handleCancel = () => {
    open.value = false
}

defineExpose({
    openDialog
})
</script>